import React, {useEffect, useState, useRef, useCallback} from 'react'
import {Card, Row, Col, Select, Form} from 'antd'
import moment from 'moment'
import echarts from 'echarts'
import {createLineOption} from '../../common/js/createEchartsOptions'
import {getDistortionSummaryById} from '../../../api/index'
import {Object} from 'core-js'
import {getAlamStatisticStep} from "../../../api/statistic";

const {Option} = Select


const stepEnum = {
	'1': {
		options: '24小时',
		step: 'hour',
		start: moment().subtract(1, 'days').format(), //昨日
	},
	'7': {
		options: '7天',
		step: 'day',
		start: moment().subtract(7, 'days').startOf('day').format(),//7日前的 00 ：00：00
	},
	'30': {
		options: '30天',
		step: 'day',
		start: moment().subtract(30, 'days').startOf('day').format(),//30日前的 00 ：00：00
	},
	'180': {
		options: '6个月',
		step: 'week',
		start: moment().subtract(180, 'days').startOf('day').format(),//180日前的 00 ：00：00
	}
}

const LineChart = (props) => {
	const {name, id} = props.data
	const end = moment().format()//今日 00：00：00
	const rowOptions = {gutter: 24, justify: 'space-between', type: 'flex'}

	const [curSelectedDateValue, setDateSelectValue] = useState('1')
	const [lineChartData, setLineChartData] = useState([])
	const chartsWraper = useRef(null)

	const handleGetDistortionSummaryById = useCallback(
		() => {
			const start = stepEnum[curSelectedDateValue].start
			const step = stepEnum[curSelectedDateValue].step
			// console.log(step);
			getAlamStatisticStep({channel: id, start, end, step}).then(res => {
				// console.log(111, res);
				setLineChartData(res)
			})
			/*getDistortionSummaryById({
				start,
				end,
				step,
				id,
				_m: 'distortion_summary'
			}).then(res => {
				const {data} = res
				setLineChartData(data)

			})*/
		},
		[curSelectedDateValue, end],
	)

	useEffect(() => {
		handleGetDistortionSummaryById()
	}, [handleGetDistortionSummaryById])


	const seriesData = lineChartData.reduce((acc, cur, curIndex, sourceArr) => {
		// console.log(acc, cur, sourceArr);
		Object.keys(cur).forEach(key => {
			if (acc[key] === undefined) {
				acc[key] = []
			}
			acc[key].push(cur[key])
		})
		return acc
	}, {})

	// console.log('ser', seriesData)
	if (chartsWraper.current) {
		const lineEchartOption = createLineOption(seriesData, stepEnum[curSelectedDateValue])
		const lineChart = echarts.init(chartsWraper.current)
		lineChart.setOption(lineEchartOption)
		// lineChart.on('mouseover', function (params) { //调用事件
		//   // 控制台打印数据的名称
		//   console.log(' contextmenu params', params);
		// });
	}

	const handleDateSelectChange = (value) => {
		setDateSelectValue(value)
		// handleGetDistortionSummaryById()
	}
	// const handleDataTypesSelectChange = (values) => {
	//   console.log(values)

	// }

	return (
		<Card style={{marginTop: '15px'}}>
			<Row {...rowOptions}>
				<Col>{!!name ? name : ''}</Col>
				<Col>
					<Form layout='inline'>
						{/* <Form.Item label='数据维度'>
              <Select style={{minWidth:'500px'}}  mode='multiple' placeholder='可选数据维度' defaultValue={Object.keys(legendEnum)} onChange={handleDataTypesSelectChange}>
                {
                  Object.keys(legendEnum).map(key => {
                    return <Option value={key} key={key}>{legendEnum[key]}</Option>
                  })
                }
            </Select>
            </Form.Item> */}
						<Form.Item label='时间维度'>
							<Select defaultValue={curSelectedDateValue} onChange={handleDateSelectChange}
							        style={{width: '100px'}}>
								{
									Object.keys(stepEnum).map(key => {
										return <Option value={key} key={key}>{stepEnum[key].options}</Option>
									})
								}
							</Select>
						</Form.Item>
					</Form>
				</Col>
			</Row>
			<Row style={{marginTop: '10px'}}>
				<div id='line-chart' ref={chartsWraper} style={{height: '300px'}}/>
			</Row>
		</Card>
	)
}

export default LineChart
